<template>
  <div class="sysAdmin">
    <div class="admin-search-container">
      <el-input placeholder="通过用户名搜索用户"
                v-model="keywords"
                prefix-icon="el-icon-search"
                class="admin-search-input"></el-input>
      <el-button type="primary"
                 @click="doSearch"
                 icon="el-icon-search">搜索</el-button>
    </div>
    <div class="admin-all-cards">
      <!--Card 卡片-->
      <el-card class="admin-card"
               v-for="(admin, index) in admins"
               :key="index">
        <div slot="header" class="clearfix">
          <span>{{admin.name}}</span>
          <!--删除按钮-->
          <el-button class="admin-card-button"
                     type="text"
                     icon="el-icon-delete"
                     @click="deleteAdmin(admin)"
                     size="medium"></el-button>
        </div>
        <div>
          <div class="admin-user-face" >
            <img class="admin-user-face-img"
                 :src="admin.userFace"
                 :alt="admin.name"
                 :title="admin.name"/>
          </div>
        </div>
        <div class="admin-user-info-container">
          <div class="admin-user-info-row">用户名 : {{admin.name}}</div>
          <div class="admin-user-info-row">手机号码 : {{admin.telephone}}</div>
          <div class="admin-user-info-row">地址 : {{admin.address}}</div>
          <div class="admin-user-info-row">用户状态:
            <el-switch v-model="admin.enabled"
                       @change="enabledChange(admin)"
                       class="admin-user-info-switch">
            </el-switch>
            <el-tag v-if="admin.enabled === true">已启用</el-tag>
            <el-tag v-else type="info">未启用</el-tag>
          </div>
          <div class="admin-user-info-row">
            用户角色 :
            <el-tag type="success"
                    class="admin-user-info-role"
                    v-for="(role, indexj) in admin.roles"
                    :key="indexj">{{role.nameZh}}</el-tag>
            <!--Popover 弹出框-->
            <el-popover
                    placement="right"
                    title="角色列表"
                    @show="showPop(admin)"
                    @hide="hidePop(admin)"
                    class="admin-user-info-popover"
                    trigger="click">
              <!--Select 选择器-->
              <el-select v-model="selectedRoles"
                         multiple
                         placeholder="请选择">
                <el-option
                        v-for="(role, index) in allRoles"
                        :key="index"
                        :label="role.nameZh"
                        :value="role.id">
                </el-option>
              </el-select>
              <el-button type="text"
                         slot="reference"
                         icon="el-icon-more"></el-button>
            </el-popover>
          </div>
          <div class="admin-user-info-row">备注 : {{admin.remark}}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SysAdmin",
    data() {
      return {
        admins: [],
        keywords: '',
        allRoles: [],
        //  里面是id
        selectedRoles: []
      }
    },
    methods: {
      initAdmins() {
        this.getRequest('/system/admin/?keywords=' + this.keywords).then(resp => {
          if (resp) {
            this.admins = resp
          }
        })
      },
      doSearch() {
        this.initAdmins()
      },
      deleteAdmin(admin) {
        //  MessageBox 弹框
        this.$confirm('此操作将永久删除[' + admin.name + ']操作员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/system/admin/' + admin.id).then(resp => {
            if (resp) {
              this.initAdmins()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      enabledChange(admin) {
        //  这几个字段传给后台会报错，应该是springsecurity的问题
        delete admin.authorities
        delete admin.accountNonLocked
        delete admin.credentialsNonExpired
        delete admin.accountNonExpired
        delete admin.password
        this.putRequest('/system/admin/', admin).then(resp => {
          if (resp) {
            this.initAdmins()
          }
        })
      },
      initAllRoles() {
        this.getRequest('/system/admin/roles').then(resp => {
          if (resp) {
            this.allRoles = resp
          }
        })
      },
      showPop(admin) {
        this.initAllRoles()
        let roles = admin.roles
        this.selectedRoles = []
        roles.forEach(item => {
          this.selectedRoles.push(item.id)
        })
      },
      hidePop(admin) {
        //  判断角色组是否有改变，不然每次隐藏后即便什么都没有改也会发送一次请求
        let roles = []
        Object.assign(roles, admin.roles)
        let flag = false
        if (roles.length != this.selectedRoles.length) {
          flag = true
        } else { // 长度一样但是元素不一样
          //  下面这个方法是自己想的，能起相同作用，但不优雅
          // let flag2 = false
          // for (let i = 0; i < roles.length; i++) {
          //   flag2 = false
          //   let role = roles[i]
          //   for (let j = 0; j < this.selectedRoles.length; j++) {
          //     let sr = this.selectedRoles[j]
          //     if (role.id === sr) {
          //       flag2 = true
          //     }
          //   }
          //   if (flag2 === false) {
          //     flag = true
          //   }
          // }
          for (let i = 0; i < roles.length; i++) {
            let role = roles[i]
            for (let j = 0; j < this.selectedRoles.length; j++) {
              let sr = this.selectedRoles[j]
              if (role.id === sr) {
                roles.splice(i, 1)
                //  splice之后数组所有元素会向前移动
                i--
                break
              }
            }
          }
          if (roles.length !== 0) {
            flag = true
          }
        }

        if (flag) {
          let url = '/system/admin/role?adminId=' + admin.id
          this.selectedRoles.forEach(item => {
            url += '&rids=' + item
          })
          this.putRequest(url).then(resp => {
            if (resp) {
              this.initAdmins()
            }
          })
        }
      }
    },
    mounted() {
      this.initAdmins()
    }
  }
</script>

<style>

  .sysAdmin {
    width: 90%;
    margin-top: 20px;
    margin-left: 40px;
  }

  .admin-search-container {
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
    border-radius: 4px;
    padding: 20px 20px 20px 20px;
    display: flex;
    justify-content: center;
  }

  .admin-search-input {
    width: 400px;
    margin-right: 10px;
  }

  .admin-all-cards {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .admin-card {
    width: 420px;
    margin-bottom: 20px;
  }

  .admin-card-button {
    float: right;
    padding: 3px 0;
    color: #F56C6C;
  }

  .admin-user-face {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .admin-user-face-img {
    width: 72px;
    height: 72px;
    border-radius: 36px;
  }

  .admin-user-info-container {
    font-size: 16px;
  }

  .admin-user-info-row {
    margin-top: 6px;
  }

  .admin-user-info-switch {
    margin-right: 10px;
  }

  .admin-user-info-role {
    margin-right: 4px;
    margin-top: 4px;
  }

  .admin-user-info-popover {
    width: 400px;
  }

</style>